<template>
  <div v-if="pages>1" class="pagination">
    <template v-if="dynamic">
      <a v-if="current!==1" class="number" @click="$emit('change',prev)">
        <
      </a>

      <a v-for="i in range" :key="i" :class="{number:true,'nuxt-link-active':i===current}" @click="$emit('change',i)"
         v-text="i"/>

      <a v-if="current!==pages" class="number" @click="$emit('change',next)">
        >
      </a>
    </template>
    <template v-else>
      <nuxt-link v-if="current!==1" class="number" :to="{name:route.name,params:{page:prev,...route.params}}">
        <
      </nuxt-link>

      <nuxt-link v-for="i in range" :key="i" :class="{number:true,'nuxt-link-active':current===i}"
                 :to="{name:route.name,params:{page:i,...route.params}}"
                 v-text="i"/>

      <nuxt-link v-if="current!==pages" class="number" :to="{name:route.name,params:{page:next,...route.params}}">
        >
      </nuxt-link>
    </template>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    //指定是否动态渲染，如果是，就默认是ajax加载，防止就是ssr渲染
    dynamic: {
      type: Boolean,
      default: false
    },
    //多少页
    pages: {
      type: Number,
      default: 10
    },
    //限制只显示多少个页码
    limit: {
      type: Number,
      default: 10
    },
    //当前页
    current: {
      type: Number,
      default: 0
    },
    route: {
      type: Object,
      default: null
    }
  },
  computed: {
    range() {
      let range = [];
      let {start, end} = this.getPageRange(this.pages, this.limit, this.current)
      for (let i = start; i <= end; i++) {
        range.push(i);
      }
      return range;
    },
    prev() {
      let p = this.current;
      if (p > 1) {
        p -= 1;
      }
      return p;
    },
    next() {
      let last = this.pages;
      let p = this.current;
      if (p < last) {
        p += 1;
      }
      return p;
    }
  },
  methods: {
    getRouteParams(page) {
      let temp = this.route;
      temp.params.page = page;
      return temp;
    },
    getPageRange(pageCount, limit, current) {

      // 分偶数和奇数
      current = parseInt(current)
      pageCount = parseInt(pageCount)
      limit = parseInt(limit)

      let fore = 0, after = 0;
      if (limit % 2 === 0) {
        fore = parseInt((limit - 1) / 2)
        after = parseInt(limit / 2)
      } else {
        fore = parseInt(limit / 2)
        after = Math.ceil((limit - 1) / 2)
      }

      let start = current - fore
      let end = current + after
      if (start < 1) {
        if (start === 0) {
          start = 1
          end += 1
        } else {
          end += parseInt(Math.abs(start))
          if (start < 0) {
            end += 1
          }
          start = 1
        }
      }

      if (end > pageCount) {
        start -= end - pageCount
        end = pageCount
      }

      if (start < 1) {
        start = 1
      }
      if (end > pageCount) {
        end = pageCount
      }
      return {start: start, end}
    }
  }
}
</script>

<style scoped lang="less">
.pagination {
  margin-top: 10px;
  text-align: center;

  .number {
    display: inline-block;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 2px;
    cursor: pointer;
  }

  .nuxt-link-active, .number:hover {
    background-color: #409eff;
    color: white;
  }
}
</style>
